// index.ts
// 获取应用实例
const app = getApp<IAppOption>()

// 定义图片类型
interface ImageItem {
  id: number;
  src: string;
  height: number;
}

Page({
  data: {
    // 瀑布流数据
    images: [] as ImageItem[], // 所有图片数据
    columns: [
      { images: [] as ImageItem[] },
      { images: [] as ImageItem[] }
    ] as { images: ImageItem[] }[],
    page: 1, // 当前页码
    pageSize: 20, // 每页数量
    loadingMore: false, // 是否正在加载更多
    noMoreData: false, // 是否没有更多数据
    showModal: false, // 是否显示弹窗
    selectedImage: null as ImageItem | null, // 当前选中的图片
  },
  
  onLoad() {
    // 初始化瀑布流
    this.initWaterfall();
  },
  
  // 页面滚动事件处理
  onPageScroll() {
    // 使用节流函数优化性能
    if (!this.data.loadingMore && !this.data.noMoreData) {
      // 检查是否需要加载更多数据
      // this.checkNeedLoadMore();
    }
  },
  
  // 检查是否需要加载更多数据
  checkNeedLoadMore() {
    // 创建查询对象
    const query = wx.createSelectorQuery();
    query.select('.waterfall-container').boundingClientRect();
    query.selectViewport().scrollOffset();
    
    query.exec((res) => {
      if (res[0] && res[1]) {
        const containerRect = res[0];
        const scrollOffset = res[1];
        
        // 计算页面底部距离容器底部的距离
        const bottomDistance = containerRect.bottom - wx.getSystemInfoSync().windowHeight;
        
        // 简单的滚动到底部检测
        if (bottomDistance < 500) {
          this.loadMore();
        }
      }
    });
  },
  
  // 初始化瀑布流布局
  initWaterfall() {
    // 模拟从接口获取数据，这里使用本地图片数据
    const localImages = [
      '/images/backgrounds/001.jpg',
      '/images/backgrounds/002.jpg',
      '/images/backgrounds/003.jpg',
      '/images/backgrounds/004.jpg',
      '/images/backgrounds/005.jpg',
      '/images/backgrounds/006.jpg',
      '/images/backgrounds/007.jpg',
      '/images/backgrounds/008.jpg',
      '/images/backgrounds/009.jpg',
      '/images/backgrounds/010.jpg',
      '/images/backgrounds/011.jpg',
      '/images/backgrounds/012.jpg',
      '/images/backgrounds/013.jpg',
      '/images/backgrounds/014.jpg',
      '/images/backgrounds/015.jpg',
      '/images/backgrounds/016.jpg',
      '/images/backgrounds/017.jpg',
      '/images/backgrounds/018.jpg',
      '/images/backgrounds/019.jpg',
      '/images/backgrounds/020.jpg',
      '/images/backgrounds/021.jpg',
      '/images/backgrounds/022.jpg',
      '/images/backgrounds/023.jpg',
      '/images/backgrounds/024.jpg',
      '/images/backgrounds/025.jpg',
      '/images/backgrounds/026.jpg',
      '/images/backgrounds/027.jpg'
    ];
    
    // 为了演示瀑布流效果，我们复制多份数据
    const images: ImageItem[] = [];
    for (let i = 0; i < 1; i++) {
      localImages.forEach((src, index) => {
        images.push({
          id: i * localImages.length + index,
          src: src,
          height: 200 + Math.random() * 100 // 随机高度，模拟不同图片尺寸
        });
      });
    }
    
    this.setData({
      images: images
    }, () => {
      this.loadMore();
    });
  },
  
  // 加载更多数据
  loadMore() {
    const { page, pageSize, images, noMoreData } = this.data;
    
    if (noMoreData) return;
    
    this.setData({
      loadingMore: true
    });
    
    // 模拟网络请求延迟
    setTimeout(() => {
      const start = (page - 1) * pageSize;
      const end = start + pageSize;
      const newImages = images.slice(start, end);
      
      if (newImages.length === 0) {
        this.setData({
          loadingMore: false,
          noMoreData: true
        });
        return;
      }
      
      // 分配图片到两列中
      const columns = this.data.columns.map((column: any) => ({ ...column }));
      
      newImages.forEach((image, index) => {
        // 简单的瀑布流实现：根据列中图片数量决定添加到哪一列
        const columnIndex = columns[0].images.length <= columns[1].images.length ? 0 : 1;
        columns[columnIndex].images.push(image);
      });
      
      this.setData({
        columns,
        page: page + 1,
        loadingMore: false
      });
    }, 500);
  },
  
  // 预览图片
  previewImage(e: any) {
    const src = e.currentTarget.dataset.src;
    const urls = this.data.images.map((item: ImageItem) => item.src);
    
    // 检查图片路径是否有效
    if (!src) {
      wx.showToast({
        title: '图片路径无效',
        icon: 'none'
      });
      return;
    }
    
    // 检查文件是否存在
    const fs = wx.getFileSystemManager();
    fs.access({
      path: src,
      success: () => {
        // 文件存在，可以预览
        wx.previewImage({
          current: src,
          urls: urls,
          fail: (err) => {
            console.error('预览图片失败', err);
            wx.showToast({
              title: '预览图片失败',
              icon: 'none'
            });
          }
        });
      },
      fail: () => {
        // 文件不存在
        wx.showToast({
          title: '图片文件不存在',
          icon: 'none'
        });
      }
    });
  },
  
  // 显示下载选项弹窗
  showDownloadOptions(e: any) {
    const src = e.currentTarget.dataset.src;
    const id = e.currentTarget.dataset.id;
    
    const selectedImage = this.data.images.find((item: ImageItem) => item.id === id);
    
    this.setData({
      showModal: true,
      selectedImage: selectedImage
    });
  },
  
  // 隐藏弹窗
  hideModal() {
    this.setData({
      showModal: false,
      selectedImage: null
    });
  },
  
  // 防止弹窗穿透
  preventModalTap(e: any) {
    // 阻止事件冒泡
    e.stopPropagation();
  },
  
  // 下载图片
  downloadImage() {
    // 替换可选链操作符以兼容当前环境
    const src = this.data.selectedImage ? this.data.selectedImage.src : null;
    
    if (!src) return;
    
    this.hideModal();
    
    wx.showLoading({ title: '下载中...' });
    
    // 下载文件
    wx.downloadFile({
      url: src,
      success: (res) => {
        if (res.statusCode === 200) {
          // 将下载的文件保存到相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              wx.showToast({
                title: '保存成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error('保存失败', err);
              // 如果是权限问题，引导用户授权
              if (err.errMsg && err.errMsg.includes('auth')) {
                wx.showModal({
                  title: '保存失败',
                  content: '需要相册权限才能保存图片，是否前往设置开启权限？',
                  success: (res) => {
                    if (res.confirm) {
                      wx.openSetting();
                    }
                  }
                });
              } else {
                wx.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      },
      fail: (err) => {
        console.error('下载失败', err);
        wx.showToast({
          title: '下载失败',
          icon: 'none'
        });
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  }
})